<template>
  <el-dialog title="用户选择"
             :visible.sync="showDialog"
             width="78%"
             top="5vh"
             :close-on-press-escape="false"
             :close-on-click-modal="false"
             @close="closeQrganization" ref="chooseUser">
    <el-row>
      <el-col :span="11" style="height:400px;">
        <!--<div>-->
          <!--<el-input placeholder="请输入员工名称或用户名查询" @blur="search" v-model="searchPerson" suffix-icon="el-icon-search"/>-->
        <!--</div>-->
        <div>
          <h3>可选择人员</h3>
          <el-table
            highlight-current-row
            v-loading="loading"
            size="small"
            ref="multipleTable"
            :data="organizationList"
            tooltip-effect="dark"
            height="390"
            style="width: 100%; overflow: auto;border:#eeeeee"
            @current-change="selectStaff">
            <el-table-column
              type="index"
              width="100"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="org_name"
              label="所在部门"/>
            <el-table-column
              prop="user_name"
              label="用户名"/>
          </el-table>
          <el-pagination
            v-if="total > 0"
            small
            :total="total"
            background
            :page-size="10"
            class="paginate"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </el-col>
      <el-col :span="12" :offset="1" style="height:200px;">
        <!--<div>-->
        <!--<el-input placeholder="请输入员工名称或用户名查询" @blur="search" v-model="searchPerson" suffix-icon="el-icon-search"/>-->
        <!--</div>-->
        <div>
          <h3>已选择人员</h3>
          <el-table
            ref="chooseTable"
            :data="chooseUser"
            height="200"
            size="small"
            tooltip-effect="dark"
            style="width: 100%;line-height:33px;border:#eeeeee">
            <!--<el-table-column-->
              <!--width="100"-->
              <!--type="selection"/>-->
            <el-table-column
              prop="org_name"
              label="所在部门"/>
            <el-table-column
              prop="user_name"
              label="用户名"/>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="closeQrganization">取 消</el-button>
      <el-button size="small" type="primary" :disabled="chooseUser.length!=1" @click="AddApprover">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'IncreaseApprovers',
    props: {
      maxType: {
        type: String
      },
      approverStatus: {
        type: [String]
      },
      callback: Function
    },
    computed: {
    },
    data() {
      return {
        total: 0,
        loading: false,
        chooseUser: [],
        showDialog: true,
        organizationList: [],
        organizationList1: {},
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        listQuery: {
          rowBounds: {
            offset: 0,
            limit: 10
          },
          sort: [{
            'direction': 'ASC',
            'property': 'groupId'
          }]
        }
      }
    },
    methods: {
      // 翻页器使用
      handleSizeChange(val) {
        this.listQuery.rowBounds.limit = val
        this.getList()
      },
      // 翻页器使用
      handleCurrentChange(val) {
        this.listQuery.rowBounds.offset =
          this.listQuery.rowBounds.limit * (val - 1)
        this.getList()
      },
      selectStaff(val) {
        const that = this
        this.chooseUser = [val]
        setTimeout(() => {
          if (this.chooseUser && this.chooseUser.length > 0) {
            this.chooseUser.map(item => {
              that.$refs.chooseTable.toggleRowSelection(item)
            })
          }
        })
      },
      closeQrganization() {
        this.callback()
        this.chooseUser = []
      },
      AddApprover() {
        // 给的回调 organizationList1接口回来的参数
        this.callback('success', this.organizationList1)
      },
      // 待编查下一审核人调接口的
      getList() {
        this.loading = true

        // 选下一审核人弹出窗口
        this.$store.dispatch('SearchApproveListbian', this.listQuery).then((res) => {
          if (res.rows) {
            this.organizationList = res.rows[0].data
            this.organizationList1 = res
            console.log('shabi')
            console.log(this.organizationList1)
          } else {
            this.organizationList = res.data
            // 分辨回调方法
            this.organizationList1 = res
          }

          this.total = res.total
          this.loading = false
        })
      }
    },
    created: function() {
      // 当前登陆人id 状
      // this.listQuery.userId = this.$store.getters.userid
      let userid = this.$store.getters.userid
      let articleId = this.$route.params.id
      let workitemInsId = this.$route.query.sid

      this.listQuery.Userid = userid
      this.listQuery.ArticleId = articleId
      this.listQuery.WorkitemInsId = workitemInsId
      this.listQuery.type = this.maxType

      if (this.approverStatus === '40' || this.approverStatus === '50') {
        // 一审
        this.listQuery.groupId = '102'
        this.getList()
      } else if (this.approverStatus === '41') {
        // 二审
        this.listQuery.groupId = '103'
        this.getList()
      } else if (this.approverStatus === '42') {
        // 三审
        this.callback('success', null)
      } else {
        this.callback('success', '')
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .long-pagination-swap{
    padding:0 10px;
  }
  .long-pagination-swap .long-pagination-text{
    display: table;
  }
  .long-pagination__total,.long-pagination-page-sizes{
    display: table-cell;
    vertical-align: middle;
    padding-right: 10px;
    font-weight: 400;
    color: #606266;
    font-size: 13px;
    padding-top: 4px;
  }
</style>
